html[data-theme="light"] {
  --sidebar-category-c: var(--c-gray-100);
  --sidebar-border-c: var(--c-gray-0);
  --ifm-menu-color-active: var(--ifm-color-primary-text);
  --ifm-menu-color-background-active: #ff9ff330;
  --ifm-menu-color: var(--c-indigo-80);
}

html[data-theme="dark"] {
  --sidebar-category-c: var(--c-gray-0);
  --sidebar-border-c: var(--c-gray-90);
  --ifm-menu-color-active: var(--ifm-color-primary-text);
  --ifm-menu-color: var(--c-gray-20);
}

:root {
  --doc-sidebar-width: 17.5rem;

  --dropdown-icon-width: 0.625rem;
  --dropdown-icon-height: 0.375rem;
  --dropdown-icon-gap: 0.688rem;

  --ifm-menu-link-padding-vertical: 0.5rem;

  --sidebar-spacing-horizontal: 1.5rem;

  // The variable aims to style the collapsible menu items on the sidebar.
  --ifm-menu-color-background-hover: transparent;
}

@media screen and (min-width: 1140px) {
  [class^="docRoot_"] {
    width: 1440px !important;
  }

  [class^="docsWrapper_"] {
    display: flex;
    justify-content: center;
  }
}

//overrides
#__docusaurus {
  .theme-doc-sidebar-container {
    background: var(--token-primary-bg-c);

    position: sticky;
    top: 60px;
    bottom: 0;
    margin-block-start: 0;
    will-change: initial;

    height: calc(100vh - 60px);

    border-inline-end: 1px solid var(--sidebar-border-c);

    [class^="sidebarViewport"] {
      // Targets the logo
      > a {
        display: flex;
        align-items: center;
        height: var(--ifm-navbar-height);

        padding-inline-start: var(--sidebar-spacing-horizontal);
        padding-inline-end: var(--sidebar-spacing-horizontal);
      }
    }
  }

  [class^="sidebar_"] {
    max-height: 100vh;
    position: static;

    overflow-y: auto;

    padding-inline-start: var(--sidebar-spacing-horizontal);
    padding-inline-end: var(--sidebar-spacing-horizontal);
    padding-block-start: 1rem;

    > .menu {
      overflow-x: initial;
      padding-block-end: 2rem;
      padding: 0;
    }
  }

  [class^="sidebarLogo"] {
    display: none !important;
  }

  .theme-doc-sidebar-item-category-level-1 > .menu__list {
    /* removes indentation from first level categories */
    padding: 0;
  }

  .menu__list {
    // display: block !important;
    transition: height 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) 25ms !important;
    will-change: initial !important;

    // margin-top: 10px;

    .menu__list {
      .menu__link--sublist {
        margin-inline-start: calc(
          -1 * (var(--dropdown-icon-width) + var(--dropdown-icon-gap))
        );

        &::after {
          // The chevron icon will have less opacity when it's not on the first level.
          opacity: 0.6;
        }
      }
    }

    &-item {
      &.theme-doc-sidebar-item-link-level-1 {
        padding-inline-start: calc(var(--dropdown-icon-width));

        & > .menu__link {
          font-weight: 500;
          font-size: 14px;
          color: var(--sidebar-category-c);
        }
      }
      &:not(:first-child) {
        margin-block-start: 0;
      }
      .menu__list {
        .menu__link {
          padding-inline-start: calc(
            var(--dropdown-icon-width) + var(--dropdown-icon-gap)
          );
        }
      }
      &-collapsible {
        // This allows the item to be clickable across the entire width of the sidebar.
        display: block;
      }
    }
  }

  .theme-doc-sidebar-item-category-level-1
    > .menu__list
    > .menu__list-item:last-of-type {
    padding-block-end: 0.5rem;
  }

  .theme-doc-sidebar-item-category-level-1:last-of-type {
    margin-block-end: 0.5rem;
  }

  .menu__link {
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 16px;
    /* identical to box height */

    display: flex;
    align-items: center;
    letter-spacing: -0.01em;

    transition: opacity 0.2s ease-out;

    &:not(.menu__link--active:not(.menu__link--sublist)) {
      background: initial;
    }

    &:not(.menu__link--active):not(.menu__link--sublist) {
      &:hover,
      &:active,
      &:focus {
        opacity: 0.7;
      }
    }
  }

  .menu__link--sublist {
    padding-inline-start: 0;
    padding-inline-end: 0;

    margin-block-end: 0;

    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;

    &::after {
      background: var(--ifm-menu-link-sublist-icon) center /
        var(--dropdown-icon-width) var(--dropdown-icon-height);
      background-repeat: no-repeat;

      min-width: auto;

      width: var(--dropdown-icon-width);
      height: var(--dropdown-icon-height);

      margin-inline-end: var(--dropdown-icon-gap);
      margin-block-end: 0;

      margin-inline-start: unset;
    }
  }

  .theme-doc-sidebar-item-category-level-1 {
    & > .menu__list-item-collapsible {
      .menu__link {
        color: var(--sidebar-category-c);

        font-weight: 600;
        font-size: 0.938rem;
        line-height: 100%;
      }
    }
  }
}
